<!-- 账号密码登录及微信一键登录 -->
<template>
	<view class="login">
		<navigator hover-class="none" open-type="navigateBack" :delta="1" class="back-icon text-white" :style="[{top:StatusBar + 'px'}]">
			<text class="icon iconfont icon-tubiaozhizuo-"></text>
		</navigator>
		<view class="u-f-ac box">
			<view class="login-box bg-white shadow-blur">
				<view class="logo-img">
					<image src="../../../static/logo.jpg" mode="aspectFill"></image>
				</view>
				<form class="login-form" @submit="save">
					<view class="u-f-ac set-li">
						<view class="prefix">账号</view>
						<input type="text" name="account" placeholder="请输入登录账号" placeholder-style="color:#aaa"/>
					</view>
					<view class="u-f-ac set-li">
						<view class="prefix">密码</view>
						<input type="text" name="password" placeholder="请输入密码" placeholder-style="color:#aaa"/>
					</view>
					<view class="u-f-jsb text-size26 bottom-text">
						<navigator hover-class='none' url="../forget/forget?name=找回密码&type=1">忘记密码？点击找回您的密码</navigator>
						<navigator hover-class='none' url="../forget/forget?name=注册新用户&type=2">注册</navigator>
					</view>
					<button class="loginWeChatBtn pw-btn u-f-jsb" form-type="submit">
						<image src="../../../static/auth/pwLogin.png"></image><text class="flex1">登录</text>
					</button>
					<button class="loginWeChatBtn wx-btn u-f-jsb" open-type="getUserInfo" @getuserinfo="wechatLogin">
						<image src="../../../static/auth/wxLogin.png"></image><text class="flex1">微信快捷登录</text>
					</button>
				</form>
			</view>
		</view>
	</view>
</template>

<script>
	
	import valid from '@/common/js/utils/formValidate.js'
	
	export default {
	        data() {
	            return {
					StatusBar: this.StatusBar    //状态栏高度
	            }
	        },
	        methods: {
	            save: function(e) {
					//定义表单验证规则
					let rule = [
						{name:"account", checkType : "phoneno", checkRule:"",  errorMsg:"请输入正确的手机号"},
						{name:"password", checkType : "notnull", checkRule:"",  errorMsg:"请输入密码"}
					];
					//获取表单数据
					let formdata = e.detail.value;
					//表单验证
	                let checkRes = valid.check(formdata, rule);
				    if(checkRes){
					   //发送请求
					   this.$http.post('/api/user/login', formdata).then(res => {
					        this.$tip.success(res)
					   }).catch(err => {
					   
					   })
				    }else{
					   uni.showToast({ title: valid.error, icon: "none" })
				    }
				}	
	        }
	    }
</script>

<style scoped lang="scss">
.login{
	position: relative;
	background-image: url(https://sbb-osss.oss-cn-beijing.aliyuncs.com/advert/weixintupian_20210413153205_1618299290285.png);
	height: 100vh;
	width: 100vw;
	min-height: 100vh;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}
.box{
	height: calc(100vh - 90rpx);
}
.back-icon{
	width: 120rpx;
	height: 90rpx;
	line-height: 90rpx;
	text-align: center;
	position: relative;
	.icon{
		font-size: 42rpx;
	}
}
.login-box{
	height: 70vh;
	flex: 1;
	margin: 0 60rpx;
	border-radius: 48rpx;
	padding: 48rpx 60rpx;
	box-shadow: 0 39rpx 68rpx rgba(14,57,101,0.32);
	.logo-img{
		height: 240rpx;
		width: 100%;
		text-align: center;
	}
	image{
		margin-top: 30rpx;
		width: 150rpx;
		height: 150rpx;
	}
}
.login-form{
}
.set-li{
	padding: 28rpx 0;
	box-sizing: border-box;
}
.set-li,
.set-li input,
.set-li text {
	font-size: 24rpx;
}

.prefix {
	padding-right: 28rpx;
	margin-right: 28rpx;
}
.bottom-text{
	padding: 28rpx 0;
	color: $main-color;
}
.loginWeChatBtn {
	width: 100%;
	height: 80rpx;
	font-size: 30rpx;
	border: none;
	color: #fff;
	margin-bottom: 40rpx;
	margin-top: 40rpx;
	border-radius: 60rpx;
	image{
		margin: auto 0;
		width: 46rpx;
		height: 46rpx;
	}
	.flex1{
		flex: 1;
		font-weight: bold;
	}
}
.pw-btn{
	background-image: linear-gradient(to right,rgb(40,109,249),rgb(40,165,249),rgb(40,165,249));
}
.wx-btn{
	background-image: linear-gradient(to right,rgb(72,177,30),rgb(93,218,44));
}
</style>
